import { Skeleton, Switch } from 'antd';
import { useEffect, useState } from 'react';

interface QuestionnaireProps {
  changeLoading: boolean,
  changeOpenState: (open: number) => void
  initialOpen: boolean | undefined
}

export default ({
  changeLoading,
  changeOpenState,
  initialOpen,
}: QuestionnaireProps) => {
  const [open, setOpen] = useState<boolean>();

  /**
   * 更新open状态
   */
  const handleOpenChange = (data: boolean) => {
    changeOpenState(data ? 1 : 0);
  };

  useEffect(() => {
    setOpen(initialOpen);
  }, [initialOpen]);

  if (open === undefined) {
    return (<Skeleton.Input style={{ width: 200 }} active />);
  }

  return (
    <span>
      问卷开放：
      <Switch
        checked={open}
        loading={changeLoading}
        onChange={(checked) => { handleOpenChange(checked); }}
      />
    </span>
  );
};
